<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>动画 | winnnntttter</title>
    <meta name="description" content="">
    <meta name="generator" content="VuePress 1.8.0">
    <link rel="icon" href="/favicon.ico">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css">
    <script>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?7ae3e8df51439cebe7b2a43bccd0b253";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
      })();
      </script>
    <meta name="description" content="winnnntttter的个人站">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <link rel="preload" href="/assets/css/0.styles.a3a399df.css" as="style"><link rel="preload" href="/assets/js/app.419c42a0.js" as="script"><link rel="preload" href="/assets/js/3.2e7f4496.js" as="script"><link rel="preload" href="/assets/js/23.fcf1e19e.js" as="script"><link rel="prefetch" href="/assets/js/10.bd166216.js"><link rel="prefetch" href="/assets/js/100.ef6c4e60.js"><link rel="prefetch" href="/assets/js/101.d01225fc.js"><link rel="prefetch" href="/assets/js/102.b85e1bb3.js"><link rel="prefetch" href="/assets/js/103.efa64f76.js"><link rel="prefetch" href="/assets/js/104.e62be1cd.js"><link rel="prefetch" href="/assets/js/105.4db56e9c.js"><link rel="prefetch" href="/assets/js/106.f6ccef65.js"><link rel="prefetch" href="/assets/js/11.705ff9c2.js"><link rel="prefetch" href="/assets/js/12.7f08fe83.js"><link rel="prefetch" href="/assets/js/13.c9276fff.js"><link rel="prefetch" href="/assets/js/14.03705b05.js"><link rel="prefetch" href="/assets/js/15.a39a18a1.js"><link rel="prefetch" href="/assets/js/16.ecd9a98c.js"><link rel="prefetch" href="/assets/js/17.cfa099fe.js"><link rel="prefetch" href="/assets/js/18.be92763c.js"><link rel="prefetch" href="/assets/js/19.8a4801fa.js"><link rel="prefetch" href="/assets/js/20.bfc1f073.js"><link rel="prefetch" href="/assets/js/21.08ea81e0.js"><link rel="prefetch" href="/assets/js/22.635463a2.js"><link rel="prefetch" href="/assets/js/24.e4fe2627.js"><link rel="prefetch" href="/assets/js/25.c64ebd97.js"><link rel="prefetch" href="/assets/js/26.b83aa917.js"><link rel="prefetch" href="/assets/js/27.9c0001f7.js"><link rel="prefetch" href="/assets/js/28.467acfc5.js"><link rel="prefetch" href="/assets/js/29.b88eaf80.js"><link rel="prefetch" href="/assets/js/30.79fca896.js"><link rel="prefetch" href="/assets/js/31.f0b09253.js"><link rel="prefetch" href="/assets/js/32.680d05e2.js"><link rel="prefetch" href="/assets/js/33.06db5f96.js"><link rel="prefetch" href="/assets/js/34.9b7ffb83.js"><link rel="prefetch" href="/assets/js/35.b302d83e.js"><link rel="prefetch" href="/assets/js/36.8ce84d21.js"><link rel="prefetch" href="/assets/js/37.8f1286d0.js"><link rel="prefetch" href="/assets/js/38.0eba62cc.js"><link rel="prefetch" href="/assets/js/39.9eafaf04.js"><link rel="prefetch" href="/assets/js/4.10fce449.js"><link rel="prefetch" href="/assets/js/40.94e167a7.js"><link rel="prefetch" href="/assets/js/41.9b634e18.js"><link rel="prefetch" href="/assets/js/42.a3ad7d5f.js"><link rel="prefetch" href="/assets/js/43.9ad38a47.js"><link rel="prefetch" href="/assets/js/44.1d5a8a2c.js"><link rel="prefetch" href="/assets/js/45.45af274c.js"><link rel="prefetch" href="/assets/js/46.45a0da7e.js"><link rel="prefetch" href="/assets/js/47.e31b4c4f.js"><link rel="prefetch" href="/assets/js/48.2b1a4ffb.js"><link rel="prefetch" href="/assets/js/49.e4a82034.js"><link rel="prefetch" href="/assets/js/5.edc6b3fb.js"><link rel="prefetch" href="/assets/js/50.8b0a75d7.js"><link rel="prefetch" href="/assets/js/51.fb58d1f2.js"><link rel="prefetch" href="/assets/js/52.aba39728.js"><link rel="prefetch" href="/assets/js/53.d683a969.js"><link rel="prefetch" href="/assets/js/54.c91b9f4c.js"><link rel="prefetch" href="/assets/js/55.76d17213.js"><link rel="prefetch" href="/assets/js/56.5935f2ad.js"><link rel="prefetch" href="/assets/js/57.65d32203.js"><link rel="prefetch" href="/assets/js/58.0b637d75.js"><link rel="prefetch" href="/assets/js/59.4f569adb.js"><link rel="prefetch" href="/assets/js/6.fe59ecb4.js"><link rel="prefetch" href="/assets/js/60.3f56e6a2.js"><link rel="prefetch" href="/assets/js/61.a6beb596.js"><link rel="prefetch" href="/assets/js/62.db0af84e.js"><link rel="prefetch" href="/assets/js/63.1d585303.js"><link rel="prefetch" href="/assets/js/64.3861310e.js"><link rel="prefetch" href="/assets/js/65.9b1ef5df.js"><link rel="prefetch" href="/assets/js/66.dd5713f3.js"><link rel="prefetch" href="/assets/js/67.fa823bb5.js"><link rel="prefetch" href="/assets/js/68.ae4e8b4f.js"><link rel="prefetch" href="/assets/js/69.b36498fb.js"><link rel="prefetch" href="/assets/js/7.04e3d394.js"><link rel="prefetch" href="/assets/js/70.8f75877a.js"><link rel="prefetch" href="/assets/js/71.8b54fe2e.js"><link rel="prefetch" href="/assets/js/72.7892e629.js"><link rel="prefetch" href="/assets/js/73.41e6a3ad.js"><link rel="prefetch" href="/assets/js/74.a8d720c9.js"><link rel="prefetch" href="/assets/js/75.677c8235.js"><link rel="prefetch" href="/assets/js/76.9c7df0e7.js"><link rel="prefetch" href="/assets/js/77.1e4ef451.js"><link rel="prefetch" href="/assets/js/78.503ea59d.js"><link rel="prefetch" href="/assets/js/79.e473582d.js"><link rel="prefetch" href="/assets/js/8.35d757ca.js"><link rel="prefetch" href="/assets/js/80.71d04c61.js"><link rel="prefetch" href="/assets/js/81.36d69e64.js"><link rel="prefetch" href="/assets/js/82.9491f2b1.js"><link rel="prefetch" href="/assets/js/83.d9808b8b.js"><link rel="prefetch" href="/assets/js/84.e0231735.js"><link rel="prefetch" href="/assets/js/85.ddc29777.js"><link rel="prefetch" href="/assets/js/86.05cd7dc6.js"><link rel="prefetch" href="/assets/js/87.1e74cca5.js"><link rel="prefetch" href="/assets/js/88.957d6dbb.js"><link rel="prefetch" href="/assets/js/89.b216c556.js"><link rel="prefetch" href="/assets/js/9.07b2db50.js"><link rel="prefetch" href="/assets/js/90.0c71a3f2.js"><link rel="prefetch" href="/assets/js/91.038eb70a.js"><link rel="prefetch" href="/assets/js/92.f05b7ced.js"><link rel="prefetch" href="/assets/js/93.e1cd3406.js"><link rel="prefetch" href="/assets/js/94.fe506104.js"><link rel="prefetch" href="/assets/js/95.440323e0.js"><link rel="prefetch" href="/assets/js/96.9ee51a0b.js"><link rel="prefetch" href="/assets/js/97.826f8538.js"><link rel="prefetch" href="/assets/js/98.15cf8919.js"><link rel="prefetch" href="/assets/js/99.489906fc.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.f879b1e1.js">
    <link rel="stylesheet" href="/assets/css/0.styles.a3a399df.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="ant-row"><div class="sidebar-button"><i aria-label="icon: bars" class="anticon anticon-bars"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="bars" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path></svg></i> <span></span></div> <div class="ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-5 ant-col-xl-5 ant-col-xxl-4"><a href="/" class="router-link-active home-link"><img src="/logo.jpg" alt="winnnntttter" class="logo"> <span class="site-name">winnnntttter</span></a> <div class="search-box mobile-search"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div> <div class="ant-col ant-col-xs-0 ant-col-sm-0 ant-col-md-18 ant-col-lg-19 ant-col-xl-19 ant-col-xxl-20"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><ul role="menu" id="nav" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-light"><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/" class="router-link-active">
          首页
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-submenu-selected"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>
          🍃前端
        </span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/Flutter/">
          🌿Flutter
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>
          🌱其他
        </span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="https://jsbin.com/" target="_blank">
          🏃‍♂️运行
          <i aria-label="icon: link" class="anticon anticon-link"><svg viewBox="64 64 896 896" focusable="false" data-icon="link" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M574 665.4a8.03 8.03 0 0 0-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 0 0 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 0 0 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 0 0-11.3 0L372.3 598.7a8.03 8.03 0 0 0 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"></path></svg></i></a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>
          🌈联系
        </span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility:hidden;position:absolute;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li></ul> <a href="https://github.com/winnnntttter/winnnntttter.github.io" target="_blank" rel="noopener noreferrer" class="repo-link"><i aria-label="icon: github" class="anticon anticon-github"><svg viewBox="64 64 896 896" focusable="false" data-icon="github" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"></path></svg></i></a></nav></div></div> <!----></header> <aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/front-end/jquery/" aria-current="page" title="jquery" class="sidebar-link">jquery</a></li><li><a href="/front-end/jquery/1.选择器.html" title="1.选择器" class="sidebar-link">1.选择器</a></li><li><a href="/front-end/jquery/2.动画、css、遍历、动态创建、五星评价、元素的位置信息.html" title="2.动画、css、遍历、动态创建、五星评价、元素的位置信息" class="active sidebar-link">2.动画、css、遍历、动态创建、五星评价、元素的位置信息</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end/jquery/2.动画、css、遍历、动态创建、五星评价、元素的位置信息.html#动画-2" title="动画" class="sidebar-link">动画</a></li><li class="sidebar-sub-header"><a href="/front-end/jquery/2.动画、css、遍历、动态创建、五星评价、元素的位置信息.html#图片缩放动画" title="图片缩放动画" class="sidebar-link">图片缩放动画</a></li><li class="sidebar-sub-header"><a href="/front-end/jquery/2.动画、css、遍历、动态创建、五星评价、元素的位置信息.html#获取-css" title="获取 css" class="sidebar-link">获取 css</a></li><li class="sidebar-sub-header"><a href="/front-end/jquery/2.动画、css、遍历、动态创建、五星评价、元素的位置信息.html#遍历" title="遍历" class="sidebar-link">遍历</a></li><li class="sidebar-sub-header"><a href="/front-end/jquery/2.动画、css、遍历、动态创建、五星评价、元素的位置信息.html#增删" title="增删" class="sidebar-link">增删</a></li><li class="sidebar-sub-header"><a href="/front-end/jquery/2.动画、css、遍历、动态创建、五星评价、元素的位置信息.html#动态创建" title="动态创建" class="sidebar-link">动态创建</a></li><li class="sidebar-sub-header"><a href="/front-end/jquery/2.动画、css、遍历、动态创建、五星评价、元素的位置信息.html#五星评价" title="五星评价" class="sidebar-link">五星评价</a></li><li class="sidebar-sub-header"><a href="/front-end/jquery/2.动画、css、遍历、动态创建、五星评价、元素的位置信息.html#property-和-attribute" title="property 和 attribute" class="sidebar-link">property 和 attribute</a></li><li class="sidebar-sub-header"><a href="/front-end/jquery/2.动画、css、遍历、动态创建、五星评价、元素的位置信息.html#获取元素的位置信息" title="获取元素的位置信息：" class="sidebar-link">获取元素的位置信息：</a></li></ul></li><li><a href="/front-end/jquery/3.绑定多个、表单事件、事件委托.html" title="3.绑定多个、表单事件、事件委托" class="sidebar-link">3.绑定多个、表单事件、事件委托</a></li><li><a href="/front-end/jquery/4.ajax.html" title="4.ajax" class="sidebar-link">4.ajax</a></li><li><a href="/front-end/jquery/异步处理.html" title="异步处理" class="sidebar-link">异步处理</a></li><li><a href="/front-end/jquery/引用.html" title="引用" class="sidebar-link">引用</a></li><li><a href="/front-end/jquery/本地图片预览.html" title="本地图片预览" class="sidebar-link">本地图片预览</a></li></ul></aside> <main class="page"> <div class="theme-antdocs-content content__default"><h1 id="动画"><a href="#动画" class="header-anchor">#</a> 动画</h1> <h2 id="动画-2"><a href="#动画-2" class="header-anchor">#</a> 动画</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">.</span><span class="token function">slideDown</span><span class="token punctuation">(</span><span class="token string">&quot;slow&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;linear&quot;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;hahaha&quot;</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token punctuation">.</span><span class="token function">slideUp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token punctuation">.</span><span class="token function">slideToggle</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">fadeIn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token punctuation">.</span><span class="token function">fadeOut</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token punctuation">.</span><span class="token function">fadeToggle</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token string">&quot;slow&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;swing&quot;</span><span class="token punctuation">,</span>fn<span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token string">&quot;font-size&quot;</span><span class="token operator">:</span><span class="token string">&quot;50px&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;line-height&quot;</span><span class="token operator">:</span><span class="token string">&quot;100px&quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">500</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">fadeTo</span><span class="token punctuation">(</span><span class="token number">600</span><span class="token punctuation">,</span><span class="token number">0.4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// 第二个参数是目标透明度</span>

<span class="token comment">// &lt;script src=&quot;js/jquery.easing.min.js&quot;&gt;&lt;/script&gt;</span>
<span class="token comment">// &lt;script src=&quot;js/jquery.color-2.1.2.min.js&quot;&gt;&lt;/script&gt;</span>

<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#box&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token string">&quot;position&quot;</span><span class="token operator">:</span><span class="token string">&quot;absolute&quot;</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token string">&quot;left&quot;</span><span class="token operator">:</span><span class="token string">&quot;+=300&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;width&quot;</span><span class="token operator">:</span><span class="token string">&quot;+=100&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;height&quot;</span><span class="token operator">:</span><span class="token string">&quot;+=100&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;backgroundColor&quot;</span><span class="token operator">:</span><span class="token string">&quot;#ffff00&quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">4000</span><span class="token punctuation">,</span><span class="token string">&quot;linear&quot;</span><span class="token punctuation">)</span>

<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#box&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token string">&quot;position&quot;</span><span class="token operator">:</span><span class="token string">&quot;absolute&quot;</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token string">&quot;left&quot;</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">&quot;+=300&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;linear&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token string">&quot;top&quot;</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">&quot;+=300&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;easeInBounce&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token string">&quot;backgroundColor&quot;</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">&quot;#ff00ff&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;swing&quot;</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">2000</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">//动画清除</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#stop_btn&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
	box<span class="token punctuation">.</span><span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#finish_btn&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
	box<span class="token punctuation">.</span><span class="token function">finish</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;ul li&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hover</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	<span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token string">&quot;width&quot;</span><span class="token operator">:</span><span class="token string">&quot;200&quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	<span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token string">&quot;width&quot;</span><span class="token operator">:</span><span class="token string">&quot;50&quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">//水滴及泡沫效果</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#drop_btn&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  box<span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token string">&quot;position&quot;</span><span class="token operator">:</span><span class="token string">&quot;absolute&quot;</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
	<span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
		<span class="token string">&quot;top&quot;</span><span class="token operator">:</span><span class="token function">$</span><span class="token punctuation">(</span>window<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">height</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-</span>box<span class="token punctuation">.</span><span class="token function">height</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token string">&quot;opacity&quot;</span><span class="token operator">:</span><span class="token number">0</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#boom_btn&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	box<span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token string">&quot;position&quot;</span><span class="token operator">:</span><span class="token string">&quot;absolute&quot;</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
	<span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token string">&quot;width&quot;</span><span class="token operator">:</span>box<span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">*</span><span class="token number">5</span><span class="token punctuation">,</span>
    <span class="token string">&quot;height&quot;</span><span class="token operator">:</span>box<span class="token punctuation">.</span><span class="token function">height</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">*</span><span class="token number">5</span><span class="token punctuation">,</span>
    <span class="token string">&quot;top&quot;</span><span class="token operator">:</span>box<span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>top<span class="token operator">-</span>box<span class="token punctuation">.</span><span class="token function">height</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">*</span><span class="token number">2</span><span class="token punctuation">,</span>
    <span class="token string">&quot;left&quot;</span><span class="token operator">:</span>box<span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>left<span class="token operator">-</span>box<span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">*</span><span class="token number">2</span><span class="token punctuation">,</span>
    <span class="token string">&quot;opacity&quot;</span><span class="token operator">:</span><span class="token string">&quot;hide&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>


<span class="token comment">//背景自动切换</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token comment">// 先定义一个数组，缓存三张图片</span>
  <span class="token keyword">var</span> images <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;images/splash01.jpg&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;images/splash02.jpg&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;images/splash03.jpg&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token keyword">var</span> index <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>

  <span class="token comment">// 闪屏是一个不断循环的过程，所以需要使用定时器</span>
  <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">// 是一个不断循环的过程</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>index <span class="token operator">&gt;=</span> images<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">{</span>
      index <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>  <span class="token comment">// 如果index到了数组的最后，从0重新开始</span>
    <span class="token punctuation">}</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;.background&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>opacity<span class="token operator">:</span><span class="token number">0</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">1500</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token comment">// 调用css()方法，将背景图片换掉,再淡出</span>
      <span class="token comment">// 每次的背景都是不同的，要动态变化</span>
      <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">&quot;backgroundImage&quot;</span><span class="token punctuation">,</span><span class="token string">'url(&quot;'</span><span class="token operator">+</span>  images<span class="token punctuation">[</span>index<span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">'&quot;)'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>opacity<span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">1500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      index<span class="token operator">++</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">6000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//锚点平滑滚动</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;a[href*='#']:not([href='#'])&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;body,html&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        scrollTop<span class="token operator">:</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>hash<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>top <span class="token operator">+</span> <span class="token string">&quot;px&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="图片缩放动画"><a href="#图片缩放动画" class="header-anchor">#</a> 图片缩放动画</h2> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>photos<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>images/countryside01.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Countryside 1<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.photos li</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 290px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 250px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #e1e1e1<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0 5px 5px 0<span class="token punctuation">;</span>
  <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.photos li img</span> <span class="token punctuation">{</span>
  <span class="token property">top</span><span class="token punctuation">:</span> -50%<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> -50%<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">opacity</span><span class="token punctuation">:</span> 0.5<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> images <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// 先定义一个数组，保存所有图片的原始大小</span>
<span class="token comment">// 为每个li绑定鼠标移入和移出事件</span>
<span class="token comment">// 当所有的li遍历结束后，images数组中就保存所有img的尺寸</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;.photos&quot;</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">&quot;li&quot;</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 鼠标移入,改变li下面的img的width,height,top,left,opacity</span>
    <span class="token keyword">var</span> $image <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">&quot;img&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment">// 获得img的尺寸(宽和高)，以对象的形式保存到数组images中</span>
    images<span class="token punctuation">[</span>index<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">{</span> width<span class="token operator">:</span> $image<span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> height<span class="token operator">:</span> $image<span class="token punctuation">.</span><span class="token function">height</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hover</span><span class="token punctuation">(</span>
      <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        $image<span class="token punctuation">.</span><span class="token function">finish</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          top<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
          left<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
          width<span class="token operator">:</span> <span class="token string">&quot;290px&quot;</span><span class="token punctuation">,</span>
          height<span class="token operator">:</span> <span class="token string">&quot;250px&quot;</span><span class="token punctuation">,</span>
          opacity<span class="token operator">:</span> <span class="token number">1</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        $image<span class="token punctuation">.</span><span class="token function">finish</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          top<span class="token operator">:</span> <span class="token string">&quot;-50%&quot;</span><span class="token punctuation">,</span>
          left<span class="token operator">:</span> <span class="token string">&quot;-50%&quot;</span><span class="token punctuation">,</span>
          width<span class="token operator">:</span> images<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>width <span class="token operator">+</span> <span class="token string">&quot;px&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 取images数组中保存的对应index处的尺寸</span>
          height<span class="token operator">:</span> images<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>height <span class="token operator">+</span> <span class="token string">&quot;px&quot;</span><span class="token punctuation">,</span>
          opacity<span class="token operator">:</span> <span class="token number">0.5</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="获取-css"><a href="#获取-css" class="header-anchor">#</a> 获取 css</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> values <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#box&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&quot;width&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;height&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;background&quot;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>values<span class="token punctuation">[</span><span class="token string">&quot;width&quot;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#box&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">&quot;width&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;+=50&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#box&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">&quot;width&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token number">100</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#box&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toggleClass</span><span class="token punctuation">(</span><span class="token string">&quot;circle&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="遍历"><a href="#遍历" class="header-anchor">#</a> 遍历</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;ul&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">&quot;li&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">index<span class="token punctuation">,</span>element</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;ul li&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">index<span class="token punctuation">,</span>element</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token comment">//index索引值，element原生js对象</span>
	<span class="token keyword">if</span><span class="token punctuation">(</span>index<span class="token operator">%</span><span class="token number">2</span><span class="token operator">==</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
		<span class="token comment">//element.innerHTML=index+&quot;偶数行&quot;;</span>
		<span class="token comment">//$(element).html(index+&quot;偶数行&quot;);</span>
		<span class="token comment">//this.innerHTML=index+&quot;偶数行&quot;;</span>
		<span class="token comment">//$(this).html(index+&quot;偶数行&quot;);</span>
		<span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">index</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">+</span><span class="token string">&quot;偶数行&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="增删"><a href="#增删" class="header-anchor">#</a> 增删</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;tbody&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;a.delete&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">parents</span><span class="token punctuation">(</span><span class="token string">&quot;tr&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">sum</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//表格添加</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;tbody&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&quot;&lt;tr&gt;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;tbody tr:last-child&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&quot;&lt;td&gt;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;tbody tr:last-child td:last-child&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;tbody tr&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;tbody tr:last-child&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&quot;&lt;td&gt;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;tbody tr:last-child td:last-child&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>input1Val<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="动态创建"><a href="#动态创建" class="header-anchor">#</a> 动态创建</h2> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>已有元素<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#btn&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">//$(&quot;ul&quot;).append(&quot;&lt;li&gt;aaaa&lt;/li&gt;&quot;)</span>
  <span class="token comment">//$(&quot;ul&quot;).append(&quot;&lt;li&gt;&quot;).append(&quot;bbbb&quot;);//不等于上一句，append后返回ul本身</span>
  <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;ul&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">prepend</span><span class="token punctuation">(</span><span class="token string">&quot;&lt;li&gt;aaaa&lt;/li&gt;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">//$(&quot;&lt;li&gt;aaaa&lt;/li&gt;&quot;).appendTo(&quot;ul&quot;);</span>
  <span class="token comment">//$(&quot;&lt;li&gt;&quot;).append(&quot;aaaaa&quot;).appendTo(&quot;ul&quot;);//等价于上一句；</span>
  <span class="token comment">//$(&quot;#item&quot;).before(&quot;&lt;li&gt;aaaa&lt;/li&gt;&quot;);</span>
  <span class="token comment">//$(&quot;#item&quot;).after(&quot;&lt;li&gt;aaaa&lt;/li&gt;&quot;);</span>
  <span class="token comment">//$(&quot;&lt;li&gt;aaaaa&lt;/li&gt;&quot;).insertBefore(&quot;#item&quot;);</span>
  <span class="token comment">//$(&quot;&lt;li&gt;&quot;).append(&quot;aaaaa&quot;).insertBefore(&quot;#item&quot;);//等价于上一句</span>
  <span class="token comment">//$(&quot;&lt;li&gt;&quot;).append(&quot;aaaaa&quot;).insertAfter(&quot;#item&quot;);</span>
  <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;ul li&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="五星评价"><a href="#五星评价" class="header-anchor">#</a> 五星评价</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;.box&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;mouseover&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> stopDiv <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">reset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;.box&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token punctuation">{</span> backgroundColor<span class="token operator">:</span> <span class="token string">&quot;red&quot;</span><span class="token punctuation">,</span> borderColor<span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">is</span><span class="token punctuation">(</span>stopDiv<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">function</span> <span class="token function">reset</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;.box&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token punctuation">{</span> backgroundColor<span class="token operator">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span> borderColor<span class="token operator">:</span> <span class="token string">&quot;&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="property-和-attribute"><a href="#property-和-attribute" class="header-anchor">#</a> property 和 attribute</h2> <p>property-&gt; 对象的属性 attribute-&gt; 元素的属性 通常，当获取表单元素的属性值时，使用.attr()会有一点小问题，这时，应该使用.prop()。</p> <h2 id="获取元素的位置信息"><a href="#获取元素的位置信息" class="header-anchor">#</a> 获取元素的位置信息：</h2> <ol><li>position()：获取相对于它最近的具有相对位置(position:relative,absolute 或 fixed)的父级元素的距离</li> <li>offset(): 始终返回相对于浏览器文档(document)的距离，它会忽略外层元素。</li> <li>以上两个方法都会返回一个对象，这个对象都包含两个参数：top,left</li> <li>计算元素滚动距离：$(document).scrollLeft()和$(document).scrollTop()</li> <li>固定导航栏到网页顶部</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">$</span><span class="token punctuation">(</span>window<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;scroll&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 当窗口滚动时，需要判断document的滚动的距离</span>
  <span class="token comment">// 如果document的向上的滚动距离超过了导航栏的offset().top</span>
  <span class="token comment">// 这时就应该固定下来导航栏</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">scrollTop</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&gt;=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#wrap&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>top<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 向#nav添加class fix,固定它</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#nav&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">&quot;fix&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token comment">// 如果回拉的话，应该取消class fix</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#nav&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">&quot;fix&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">最后更新时间:</span> <span class="time">1/28/2021, 5:29:11 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev"><a href="/front-end/jquery/1.选择器.html" class="prev"><i aria-label="icon: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" focusable="false" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i>
        1.选择器
      </a></span> <span class="next"><a href="/front-end/jquery/3.绑定多个、表单事件、事件委托.html">
        3.绑定多个、表单事件、事件委托
        <i aria-label="icon: right" class="anticon anticon-right"><svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></span></p></div> </main> <!----></div><div class="global-ui"><!----><div id="goTop" class="hide-cat" data-v-bf92849a></div></div></div>
    <script src="/assets/js/app.419c42a0.js" defer></script><script src="/assets/js/3.2e7f4496.js" defer></script><script src="/assets/js/23.fcf1e19e.js" defer></script>
  </body>
</html>